<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>智慧农业边缘云控一体化系统登录界面</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			html,
			body {
				height: 100%;
			}

			body {
				display: flex;
				justify-content: center;
				align-items: center;
				/* 渐变色网站： https://webgradients.com/*/
				background-image: linear-gradient(to top, #ace0f9 0%, #fff1eb 100%);
				/* 渐变换图片 */
			}

			.login {
				width: 400px;
				height: 250px;
				background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
				border-radius: 8px;
			}

			.login h1 {
				height: 38px;
				width: 93%;
				background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
				line-height: 38px;
				font-size: 30px;
				text-align: center;
				border-radius: 5px;
				margin: 15px auto;
			}

			.login-form {
				width: 60%;
				margin: 0 auto;
			}

			.login-form form input {
				width: 220px;
				height: 30px;
				outline: none;
				margin: 10px auto;
				border-radius: 5px;
			}

			.button {
				/* 按钮样式模板网站：http://tools.jb51.net/static/api/button_css/ */
				line-height: 30px;
				height: 30px;
				width: 70px;
				color: #ffffff;
				background-color: #4a8cf7;
				font-size: 16px;
				font-weight: normal;
				font-family: Arial;
				border: 0px solid #dcdcdc;
				-webkit-border-top-left-radius: 3px;
				-moz-border-radius-topleft: 3px;
				border-top-left-radius: 3px;
				-webkit-border-top-right-radius: 3px;
				-moz-border-radius-topright: 3px;
				border-top-right-radius: 3px;
				-webkit-border-bottom-left-radius: 3px;
				-moz-border-radius-bottomleft: 3px;
				border-bottom-left-radius: 3px;
				-webkit-border-bottom-right-radius: 3px;
				-moz-border-radius-bottomright: 3px;
				border-bottom-right-radius: 3px;
				-moz-box-shadow: inset 0px 0px 0px 0px #ffffff;
				-webkit-box-shadow: inset 0px 0px 0px 0px #ffffff;
				box-shadow: inset 0px 0px 0px 0px #ffffff;
				text-align: center;
				display: inline-block;
				text-decoration: none;
			}

			.button:hover {
				background-color: #446bf7;
			}

			.footer {
				position: fixed;
				bottom: 0;
				height: 50px;
				font-size: 12px;
				text-align: center;
				font-family: "宋体";
			}
		</style>
		<script>
			function sendReq(){
				console.log("login");
				// var v1=document.getElementById("usr").value;
				// var v2=document.getElementById("pwd").value;
				// var req="username="+v1+"&password="+v2;
				// console.log(req);
				// var xhr=new XMLHttpRequest();
				// var url="";
				// xhr.open("post",url,true);
				// xhr.send(req);
				
				var v1=document.getElementById("usr").value;
				var v2=document.getElementById("pwd").value;
			    const correctUsername = "456";  // 预设的用户名
                const correctPassword = "123456";  // 预设的密码
            
            // 检查用户名和密码是否匹配
            if (v1 === correctUsername && v2 === correctPassword) {
                // 登录成功，跳转到另一个页面
                window.location.href = "index.html";  // 替换为你目标页面的路径
                return false;  // 阻止表单提交
            } else {
                alert("用户名或密码错误！");
                event.preventDefault();  // 阻止表单提交
                return false;  // 返回 false，阻止页面跳转
			}
		}
		</script>
		</meta>
	</head>
	<body>
		<div class="login">
			<h1>智慧农业边缘云控系统</h1>
			<div class="login-form">
				<form >
					<input type="text" name="username" id="usr" value="" placeholder="请输入用户名" />
					<input type="password" name="password" id="pwd" value="" placeholder="请输入密码" />
					<input type="button" class="button" value="登    录" onclick="sendReq()"/>
				</form>
			</div>

		</div>
		<div class="footer">
			联系电话: 15588969229 &nbsp 技术支持QQ: 1275224162<br/>
		</div>

	</body>
</html>
